<template>
  <div class="warpper">
    <swiper :options="swiperOption">
      <swiper-slide v-for="(item, index) in swiperList" :key="index">
        <img class="swiper-img" :src="item.imgUrl" :alt="index">
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
      <!--    <div class="swiper-button-prev" slot="button-prev"></div>-->
      <!--    <div class="swiper-button-next" slot="button-next"></div>-->
      <!--    <div class="swiper-scrollbar" slot="scrollbar"></div>-->
    </swiper>
  </div>
</template>

<script>
export default {
  name: 'HomeSwiper',
  data () {
    return {
      swiperList: [
        {
          id: '0001',
          imgUrl: 'http://img1.qunarzz.com/piao/fusion/1801/1a/94428c6dea109402.jpg_640x200_2cf590d8.jpg'
        },
        {
          id: '0002',
          imgUrl: 'http://img1.qunarzz.com/piao/fusion/1802/42/7c92b9a381e46402.jpg_640x200_1cdce2a4.jpg'
        }
      ],
      swiperOption: {
        pagination: {
          el: '.swiper-pagination'
        },
        notNextTick: true,
        autoplay: true,
        speed: 1000,
        loop: true
      }
    }
  }
}
</script>

<style scoped lang="stylus">
  //穿透 所有在.wrapper下面的.swiper-pagination-bullet-active更改小圆点的背景颜色
  .wrapper>>> .swiper-pagination-bullet-active
    background: #fff;
  .warpper
    width 100%
    height 0
    padding-bottom 31.25%
    overflow hidden
    img
      width 100%
</style>
